---
title: Add a layout
---


::doc-component-demo
---
title: Choose and enable a layout
---

Layouts are used to define the structure of your page. Tairo has multiple layout options (two at the moment and more in the future), they mostly differ by how the navigation experience is handled.


- :doc-linker{to="TairoSidebarLayout"} : 

  This layout is provided by `tairo-layout-sidebar` layer, it's the default layout used on the demo app.
  
- :doc-linker{to="TairoCollapseLayout"} :  

  This layout is provided by `tairo-layout-collapse` layer, it has better navigation experience when few items are needed to be displayed.


:doc-heading{label="Enable layout layers"}

To keep things simple, we grouped each layout in a dedicated nuxt layer, so they have their own set of components, composables, configuration and dependencies. 

```bash
├── app
├── layers
│   ├── tairo-layout-collapse # register 'collapse' layout
│   └── tairo-layout-sidebar # register 'sidebar' layout
```

To enable a layout, you need to add it to the `extends` section of your `nuxt.config.ts` file.

```ts [app/nuxt.config.ts]
export default defineNuxtConfig({
  extends: [
    // required base layer
    '../layers/tairo',

    // enable the sidebar layout
    '../layers/tairo-layout-sidebar',
  ],
})
```


:::doc-message{type="muted" icon="ph:info"}
To learn more about layers, check out the [layers section](/documentation/layers)
:::


:doc-heading{label="Assign layout to a page"}

Components that are defined in `app/pages/` (and any other `pages/` folders of enabled layers) will be considered as pages. You can assign a layout to a page by adding the `layout` property to the `definePageMeta` macro.

```vue [app/pages/index.vue]
<script setup lang="ts">
definePageMeta({
  // Layout can be set on a per page basis
  layout: 'sidebar',
})
</script>
```

:doc-heading{label="Set default layout"}

Instead of setting the layout on each page, you can create a `app/layout/default.vue` component that will be used as the default layout for all pages. In this component, you just have to include the main component of the layout you want to use, in this case we use :doc-linker{to="TairoSidebarLayout"}

```vue [app/layouts/default.vue]
<template>
  <TairoSidebarLayout>
    <slot />
  </TairoSidebarLayout>
</template>
```



:doc-heading{label="Layout app config"}

As layouts differ by how the navigation experience is handled, they also have their own set of configuration options. In order to have a great developer experience, we defined a dedicated schema for each layout so you can have autocompletion in your `app/app.config.ts` file.

This configuration depends on each layout, you'll be able to learn more about each one of these in the dedicated layout documentation, but here is a quick configuration example for the sidebar layout.

```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    sidebar: {
      navigation: {
        enabled: true,
        startOpen: true,
        logo: {
          // sidebar logo configuration
        },
        items: [
        // navigation items configuration
        ],
      },
    },
  },
})
```

Find more information about how to setup navigation in the [sidebar layout configuration](/documentation/config/sidebar) documentation.


:doc-heading{label="Force empty layout"}

You should still be able to optout from the default layout by setting the `layout` property to `empty` on a page.

```vue [app/pages/index.vue]
<script setup lang="ts">
definePageMeta({
  // Don't use the default layout for this page
  layout: 'empty',
})
</script>
```

:::doc-message{type="muted" icon="ph:info"}
Take a look at the `demo/pages/layouts/projects/board/[slug].vue` page, which has advanced layout configuration.
:::

---

Useful resources:

- [Read pages and layouts guide on nuxt.com](https://nuxt.com/docs/migration/pages-and-layouts)
- [Learn about layouts directory on nuxt.com](https://nuxt.com/docs/guide/directory-structure/layouts)

::



::doc-nav
---
prev: /documentation/setup/first-page
next: /documentation/config
---
::